<template>
  <div class="container">
    <el-container>
      <el-aside>
        <!-- 侧边栏 -->
        <Caside @changeChat="changeChat"></Caside>
      </el-aside>
      <el-container>
        <el-header>
          <!-- 头部 -->
          <div></div>
          <div>
            <!-- <el-switch v-model="dark" active-text="Dark" inactive-text="Light" @change="changeTheme" active-color="#13ce66" inactive-color="#ff4949" /> -->
            <el-switch v-model="dark" :active-action-icon="MoonNight" :inactive-action-icon="Sunny"
               @click="changeTheme"/>
          </div>
        </el-header>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import router from '@/route';
import { Room } from '@/types/allTypes';
import Caside from '@/views/chat/component/aside.vue'
import { useTheme } from '@/store/models/theme';
import { Sunny, MoonNight } from '@element-plus/icons-vue'

// 获取主题信息
const themeStore = useTheme()

// 切换聊天室
const changeChat = (room: Room) => {
  console.log(room)
  router.push("/chat/main?chatId=" + room.room_id);
}

onMounted(() => {
  const theme = themeStore.getTheme
  if (theme === 'dark') {
    dark.value = true
    themeStore.setTheme('dark')
    document.body.setAttribute('class', 'dark');
    document.documentElement.setAttribute('class', 'dark');
  }
})

interface doc extends Document {
  startViewTransition: (callback: () => void) => trin;
}

type trin = {
  ready: Promise<void>;
}

// 切换主题
const dark = ref(false);
const changeTheme = ( event: MouseEvent) => {
  const Transiton = (document as doc).startViewTransition(() => {
    if (dark.value) {
      // themeStore.setTheme('light')
      // document.body.setAttribute('class', 'light');
      // document.documentElement.setAttribute('class', 'light');
      // localStorage.setItem('theme', 'light');
      themeStore.setTheme('dark')
      document.body.setAttribute('class', 'dark');
      document.documentElement.setAttribute('class', 'dark');

    } else {
      themeStore.setTheme('light')
      document.body.setAttribute('class', 'light');
      document.documentElement.setAttribute('class', 'light');
    }
  })
  Transiton.ready.then(() => {
    const { clientX, clientY } = event
    const redius = Math.hypot(
      Math.max(clientX, innerWidth - clientX),
      Math.max(clientY, innerHeight - clientY)
    )

    let isdark = document.documentElement.classList.contains('dark')

    let clipPath = [
      `circle(0px at ${clientX}px ${clientY}px)`,
      `circle(${redius}px at ${clientX}px ${clientY}px)`
    ]
    document.documentElement.animate({ clipPath: isdark ? clipPath.reverse() : clipPath }, { duration: 500, pseudoElement: isdark ? "::view-transition-old(root)" : "::view-transition-new(root)" })
  })
}
</script>

<style scoped lang="scss">
.container {
  height: 100vh;
  width: 100vw;

  .el-container {
    height: 100%;

    .el-aside {
      width: 4rem;
      background-color: #f0f2f5;
    }

    .el-container {
      height: 100%;
      padding: 0 0.2rem 0.5rem;
      background-color: var(--bg-color);

      .el-header {
        height: 2rem;
        // background-color: #ccc;
        display: flex;
        justify-content: space-between;
        align-items: center;

      }

      .el-main {
        height: 100%;
        background-color: var(--bg-color-1);
        border-radius: 1rem;
        padding: 1rem;

      }
    }
  }
}
</style>